<template>
    <div class="common-layout">
      <el-container>
       <el-aside width="200px" class="bg-blue-300 h-screen rounded-3xl">
          <div class="rounded-3xl bg-gray-500 p-6">
            <h1 class="text-blue-500 text-center font-extrabold text-2xl">欢迎</h1>
          </div>
          <el-menu @select="menuClick" :default-active="activeIndex" class="bg-blue-300">
            <el-sub-menu index="1">
              <template #title>
                <el-icon><Menu></Menu></el-icon>
                <span>学员</span>
              </template>
              <el-menu-item index="/stuHome/introduction" class="flex items-center justify-center">
                <el-icon><Menu></Menu></el-icon>
                机构简介
              </el-menu-item>
            </el-sub-menu>
            
            
          </el-menu>
       </el-aside>
              <el-container>
                  <el-header class="bg-gray-300 rounded-3xl flex items-center justify-end">
                    <el-button type="primary" @click="logout" class="rounded-2xl">退出</el-button>
                  </el-header>
                  <el-main><router-view></router-view></el-main>
              </el-container>
      </el-container>
    </div>
  </template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const activeIndex = ref('/stuHome/introduction');
const menuClick = (index) => {
    if (this.$route.path !== index) {
        this.$router.push(index);
    }
    this.activeIndex=index
    sessionStorage.setItem('activeindex',this.activeIndex)
}
const logout = () => {
    router.push('/stuLogin');
}

</script>

<style>

</style>